import Taro, { Component } from '@tarojs/taro'
import { AtButton } from 'taro-ui'
import classnames from 'classnames'
import PropsType from 'prop-types'
import { View, Text, Image } from '@tarojs/components'
import '../styles/carinfo.scss'
import common from '@/common/'
const countMinPri = common.countMinPri
const carIcon = require('../assete/icon_car.png')
const box = require('../assete/check_box.png')
const checked = require('../assete/checked.png')
export default class DCarInfo extends Component {

  onDetail() {
    this.props.onDetail && this.props.onDetail()
  }

  firstClick(e) {
    e.stopPropagation()
    this.props.firstClick && this.props.firstClick()
  }

  secodeClick(e) {
    e.stopPropagation()
    this.props.secodeClick && this.props.secodeClick()
  }

  threeClick(e) {
    e.stopPropagation()
    this.props.threeClick && this.props.threeClick()
  }
  handlecheck(e) {
    e.stopPropagation()
    this.props.handlecheck && this.props.handlecheck()
  }
  render() {
    const {
      className,
      nameList = ['奔驰', 'GLA200', '18款', '时尚'],
      infoList = ['中规', '国六', '现货', '外观颜色', '黑色'],
      place = '卖广东省',
      money = '60.00万元',
      carmoney = '60.99万元',
      firstText = '改价',
      secodeText = '发布同款',
      threeText = '下架',
      icon,
      company,
      clock,
      buttonList,
      item,
      check
    } = this.props
    return (
      <View className={classnames(check ? 'flex__box' : '', className)}>
        { check &&
          <View className='flex__img'>
            <Image src={check === '1' ? checked : box} className='flex__check' onClick={this.handlecheck.bind(this)}></Image>
          </View>
        }
        <View className={classnames('b_carinfo', className)} onClick={this.onDetail.bind(this)}>
          <View className='b_carinfo__name'>
            <View className='b_carinfo__name_text'>
              <View className='item_icon'>
                <Image src={icon || carIcon} className='item_icon__images'></Image>
              </View>
              <Text className='item_text'>
                {
                  nameList.map((item, i) => {
                    return <Text className='item_text__item' key={i}>{item || '--'}</Text>
                  })
                }
              </Text>
            </View>
            {
              place && <View className='b_carinfo__name_place'>{place}</View>
            }
          </View>
          <View className='b_carinfo__info' style={'justify-content: space-between'}>
            <View>
              {
                infoList.map((item, i) => {
                  return <Text className='item_info' key={i}>{item}</Text>
                })
              }
            </View>

          </View>
          <View className='b_carinfo__money' >
            <View className='item_money'>指导价：
              	<Text>
                {window.toFixed(money)}万/
              	<Text>{countMinPri(carmoney, money)}万
              	</Text>
              </Text>
            </View>
            {
              +carmoney !== 0 && <View className='item_carmoney'>{window.toFixed(carmoney)}万</View>
            }
          </View>
          <View className='b_carinfo__place'>
            <View className='item_place'>{company}</View>
            <View className='item_time'>{clock}</View>
          </View>
          <View className='b_carinfo__btn'>
            {
              buttonList && buttonList.map(ib => <AtButton onClick={(e) => {
                e.stopPropagation()
                ib.onClick && ib.onClick(item, ib)
              }}>{ib.text}</AtButton>)
            }
            {
              firstText && <AtButton onClick={this.firstClick.bind(this)}>{firstText}</AtButton>
            }
            {
              secodeText && <AtButton onClick={this.secodeClick.bind(this)}>{secodeText}</AtButton>
            }
            {
              threeText && <AtButton onClick={this.threeClick.bind(this)}>{threeText}</AtButton>
            }

          </View>
        </View>
      </View>

    )
  }
}

DCarInfo.defaultProps = {
  className: '',
  nameList: ['奔驰', 'GLA200', '18款', '时尚'],
  infoList: ['中规', '国六', '现货', '外观颜色', '黑色'],
  place: '',
  money: '60.00',
  carmoney: '',
  firstText: '',
  secodeText: '',
  threeText: '',
  icon: '',
  company: '广州一二三有限公司',
  clock: '',
  check: '',
  buttonList: [],
  onDetail: () => { },
  firstClick: () => { },
  secodeClick: () => { },
  threeClick: () => { }
}
DCarInfo.PropsType = {
  className: PropsType.oneOfType[PropsType.string, PropsType.object],
  nameList: PropsType.array,
  infoList: PropsType.array,
  place: PropsType.string,
  money: PropsType.string,
  carmoney: PropsType.string,
  firstText: PropsType.string,
  secodeText: PropsType.string,
  threeText: PropsType.string,
  icon: PropsType.string,
  company: PropsType.string,
  clock: PropsType.number,
  check: PropsType.string,
  buttonList: PropsType.array,
  onDetail: PropsType.func,
  firstClick: PropsType.func,
  secodeClick: PropsType.func,
  threeClick: PropsType.func
}
